<script setup>
import { inject, onDeactivated, onMounted, onUpdated, ref } from 'vue'
import Image1 from '../assets/png/img/user.jpg' // 确保图片路径正确
import Image2 from '../assets/png/img/balance.png' // 确保图片路径正确
import Image3 from '../assets/png/img/warning.png' // 确保图片路径正确
import mov1 from '../assets/png/img/move.png' // 确保图片路径正确
import mov2 from '../assets/png/img/move2.png' // 确保图片路径正确
import mov3 from '../assets/png/img/move3.png' // 确保图片路径正确
import { color } from 'echarts'
import { onBeforeRouteLeave } from 'vue-router'
const allList = ref([
  {
    title: '业主人数',
    num: '2318'
  },
  {
    title: '访客人数',
    num: '880'
  },
  {
    title: '外来人数',
    num: '174'
  }
])
const value = ref(1)

const list = ref([
  {
    title: '监控1:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控2:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控3:T9北侧',
    time: '08.12 18',
    type: '已消警'
  },
  {
    title: '监控4:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控5:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控6:T9北侧',
    time: '08:12:18',
    type: '已消警'
  },
  {
    title: '监控7:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控8:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控9:T9北们',
    time: '08:12:18',
    type: '已消警'
  }
])
const moveList = ref([
  {
    title: '星关广场云台',
    url: mov1
  },
  {
    title: '底商北侧',
    url: mov1
  },
  {
    title: '后山艺术空间',
    url: mov1
  },
  {
    title: 'T9后面',
    url: mov2
  },
  {
    title: '门口',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  }
])
const energy = ref([
  {
    title: '本月总能耗 (单位：kw.h)',
    num: '11787'
  },
  {
    title: '本年总能耗 (单位:kw.h)',
    num: '210688'
  },
  {
    title: '本日总负荷 (单位:kw.h)',
    num: '73779'
  },
  {
    title: '本年平均能耗 (单位:kw.h)',
    num: '10127'
  },
  {
    title: '本日总电费 (单位:元)',
    num: '5646'
  },
  {
    title: '本年总电费 (单位:元)',
    num: '203231'
  }
])
const line_content = ref(null)
const across_bar = ref(null)
let echarts = inject('echarts')
var myChartLine, myChartPie, myChartBar
const camera_round = ref(null)
let optionPie = {
  title: [
    {
      text: '室内温度',
      textStyle: { fontSize: '14px', color: '#4a80a2' },
      top: '40%',
      left: '48%',
      textAlign: 'center'
    },
    {
      text: '65%',
      textStyle: { fontSize: '14px', color: '#27d9c8' },
      top: '55%',
      left: '48%',
      textAlign: 'center'
    }
  ],
  series: [
    {
      type: 'pie',
      // : 130, // 45度倾斜
      startAngle: 40,
      radius: ['65%', '100%'],
      center: ['50%', '50%'],
      data: [
        {
          value: 130,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: '#2b6480' }, // 渐变起始色
                { offset: 0.5, color: '#2adfcd' }, // 渐变结束色
                { offset: 1, color: '#2b6480' } // 渐变结束色
              ]
            }
          }
        },
        { value: 50, itemStyle: { color: 'transparent' } } // 透明部分
      ],
      label: {
        show: false // 不显示标签
      }
    }
  ]
}
let optionBar = {
  grid: {
    top: '30',
    bottom: '34',
    left: '2%', // 调整左边距
    right: '20', // 调整右边距
    containLabel: true
  },
  legend: {
    top: 'top', // 图例显示在顶部
    data: ['出水温度', '进水温度'], // 图例项的名称，与 series.name 对应
    textStyle: {
      color: '#fff'
    }
  },
  xAxis: {
    min: -400, // 设置X轴的最小值
    max: 300, // 设置X轴的最大值
    splitNumber: 8, // 设置刻度数量
    type: 'value',
    position: 'bottom', // 坐标轴位置
    axisLine: {
      show: false,
      lineStyle: {
        color: '#87a0b9'
      }
    },
    axisLabel: {
      color: '#87a0b9'
    },
    splitLine: {
      // 设置分割线为虚线
      lineStyle: {
        type: 'dashed', // 设置虚线类型
        color: '#6e717e', // 分割线颜色
        width: 2 // 分割线宽度
      }
    }
  },
  yAxis: {
    interval: 1, // 从第二个刻度开始显示分割线
    axisLabel: {
      color: '#87a0b9'
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#87a0b9'
      }
    },
    axisTick: { show: false },
    type: 'category',
    data: ['冷凝器', '蒸发器']
  },
  label: {
    show: true, // 显示标签
    position: 'inside', // 设置标签位置为柱子内部中间
    align: 'center', // 水平居中
    verticalAlign: 'middle', // 垂直居中
    color: '#fff'
  },
  series: [
    {
      name: '出水温度',
      type: 'bar',
      barWidth: '50%', // 设置柱子宽度
      data: [-120, -302],
      itemStyle: {
        color: '#a207d4'
      },
      stack: '总量'
    },
    {
      type: 'bar',
      name: '进水温度',
      data: [120, 300],
      barWidth: '35%',
      itemStyle: {
        color: '#0ca9d9'
      },
      stack: '总量'
    }
  ]
}
//指定折线图
let optionLine = {
  title: [
    {
      text: '位数/时',
      left: '37rem', // 标题水平居中
      top: '0rem', // 标题在顶部
      textStyle: {
        fontSize: '.175rem', // 字体大小
        color: '#446fb8' // 字体颜色
      }
    },
    {
      text: '单位：千/kw.h',
      right: '40', // 标题在右侧
      top: 'top', // 标题在顶部
      textStyle: {
        fontSize: '.1625rem', // 字体大小
        color: '#cccccc' // 字体颜色
      }
    }
  ],
  grid: {
    left: '0rem',
    top: '40rem',
    right: '10rem',
    bottom: '30rem',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['6-27', '6-28', '6-29', '6-30', '7-1', '7-2', '7-3', '7-4', '7-5'],
    //设置坐标轴标签
    axisLabel: {
      // 字体大小
      fontSize: '0.125rem',
      color: '#87a0b9'
    },
    //设置坐标轴的线
    axisLine: {
      //不显示样式
      show: false
    }
  },
  yAxis: {
    //虚线
    splitLine: {
      lineStyle: {
        type: 'dashed',
        width: 1.5, // 线宽
        color: '#ccc', // 线颜色
        dashOffset: -30 // 设置虚线的偏移量，影响虚线间隔
      }
    },
    axisLabel: {
      // 字体大小
      fontSize: '0.125rem',
      color: '#87a0b9'
    }
  },
  lineStyle: {
    color: '#4a1b64'
  },
  series: [
    {
      data: [20, 29, 40, 33, 68, 55, 43, 33, 10],
      type: 'line',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#4a1b64' }, // 渐变起始颜色
          { offset: 1, color: '#14435c' } // 渐变结束颜色
        ])
      },
      itemStyle: {
        color: '#cd6e6e',
        borderWidth: '2px'
      }
    }
  ]
}
onMounted(() => {
  myChartBar = echarts.init(across_bar.value)
  myChartBar.setOption(optionBar)
  myChartPie = echarts.init(camera_round.value)
  myChartPie.setOption(optionPie)
  myChartLine = echarts.init(line_content.value)
  myChartLine.setOption(optionLine)
  window.addEventListener('resize', function () {
    myChartLine.resize()
    myChartPie.resize()
    myChartBar.resize()
  })
})
setTimeout(() => {
  myChartLine.resize()
  myChartPie.resize()
  myChartBar.resize()
})
const leave = ref(false)
onBeforeRouteLeave((to, from, next) => {
  leave.value = true
  setTimeout(() => {
    next()
  }, 200)
})
const scale = inject('scale')
</script>
<template>
  <div class="security_layout">
    <div
      ref="left"
      class="left pl"
      :style="{ '--scale-factor': scale }"
      :class="{ 'slide-in-left-leave': leave, 'slide-in-left': !leave }"
    >
      <div class="all shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>安防概述</div>
        </div>
        <div class="item_1">
          <img class="image" src="../assets/png/img/title.png" mode="" />
          <div class="text">
            <span class="s1">当前社区总人数</span>
            <span class="s2">12530</span>
          </div>
        </div>
        <div class="item_2">
          <div class="item_2_t" v-for="(item, index) in allList" :key="index">
            <div class="text">
              <div class="title">{{ item.title }}</div>
            </div>
            <div style="color: #9dcef3; font-size: 0.175rem">{{ item.num }}</div>
          </div>
        </div>
      </div>
      <div class="proportion shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>摄像头视频监控</div>
        </div>
        <div class="content">
          <div v-for="i in 3" :key="i" class="move">
            <img class="img" :src="mov3" alt="" />
            <div>星关广场云台</div>
          </div>
        </div>
      </div>
      <div class="list shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>报警信息列表</div>
        </div>
        <div class="content">
          <div class="item" v-for="(item, index) in list" :key="index">
            <div class="left"></div>
            <div class="right">
              <div class="ct_1">
                <span>{{ item.title }}</span>
                <span
                  class="span"
                  style="color: #fff"
                  :class="{ b_1: item.type == '处理中', b_2: item.type == '已消警' }"
                  >{{ item.type }}</span
                >
              </div>
              <div class="ct_2">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="right pr"
      :style="{ '--scale-factor': scale }"
      :class="{ 'slide-in-right-leave': leave, 'slide-in-right': !leave }"
    >
      <div class="data shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>舒适度数据统计</div>
        </div>
        <div class="content">
          <div class="left">
            <div ref="camera_round" id="camera_round"></div>
          </div>
          <div class="right">
            <div class="item_1">室内空气：32%</div>
            <div class="item_2">32%</div>
            <div class="item_1">室内温度：53.685%</div>
            <div class="item_2">53.685%</div>
          </div>
        </div>
      </div>
      <div class="data_2 shadow">
        <div class="overview">
          <div class="title">
            <img class="image" src="../assets/png/img/titleImg.png" mode="" />
            <div>能源数据概况</div>
          </div>
          <div class="content">
            <div class="item" v-for="(item, index) in energy" :key="index">
              <div class="energy">{{ item.title }}</div>
              <div class="text">{{ item.num }}</div>
            </div>
          </div>
        </div>
        <div class="statistics">
          <div class="title">
            <img class="image" src="../assets/png/img/titleImg.png" mode="" />
            <div>系统能效统计</div>
          </div>
          <div class="content">
            <div ref="line_content" id="line_content"></div>
          </div>
        </div>
        <div class="host">
          <div style="height: 100%; width: 100%">
            <div class="title">
              <img class="image" src="../assets/png/img/titleImg.png" mode="" />
              <div>机主运行情况</div>
            </div>
            <el-carousel height="100%" :autoplay="false">
              <el-carousel-item>
                <div class="sum">
                  <div class="content">
                    <div ref="across_bar" id="across_bar"></div>
                  </div>
                  <div class="content_right">
                    <div class="ct_1">
                      <div>1#冷战</div>
                      <div style="font-size: 0.15rem">(1#主机)</div>
                    </div>
                    <div class="ct_2">
                      <div>开启状态</div>
                      <div>启动</div>
                    </div>
                    <div class="ct_2">
                      <div>运行状态</div>
                      <div>启动</div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="sum">
                  <div class="content">
                    <!-- <div ref="across_bar" id="across_bar"></div> -->
                  </div>
                  <div class="content_right">
                    <div class="ct_1">
                      <div>1#冷战</div>
                      <div style="font-size: 0.15rem">(1#主机)</div>
                    </div>
                    <div class="ct_2">
                      <div>开启状态</div>
                      <div>启动</div>
                    </div>
                    <div class="ct_2">
                      <div>运行状态</div>
                      <div>启动</div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="sum">
                  <div class="content">
                    <!-- <div ref="across_bar" id="across_bar"></div> -->
                  </div>
                  <div class="content_right">
                    <div class="ct_1">
                      <div>1#冷战</div>
                      <div style="font-size: 0.15rem">(1#主机)</div>
                    </div>
                    <div class="ct_2">
                      <div>开启状态</div>
                      <div>启动</div>
                    </div>
                    <div class="ct_2">
                      <div>运行状态</div>
                      <div>启动</div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="sum">
                  <div class="content">
                    <!-- <div ref="across_bar" id="across_bar"></div> -->
                  </div>
                  <div class="content_right">
                    <div class="ct_1">
                      <div>1#冷战</div>
                      <div style="font-size: 0.15rem">(1#主机)</div>
                    </div>
                    <div class="ct_2">
                      <div>开启状态</div>
                      <div>启动</div>
                    </div>
                    <div class="ct_2">
                      <div>运行状态</div>
                      <div>启动</div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('@/assets/scss/CIM.scss');
@import url('@/assets/scss/common.scss');

:deep(.el-carousel) {
  height: 100%;
  width: 4.85rem;
}
:deep(.el-carousel-item) {
  height: 100%;
  width: 4.85rem;
}
:deep(.el-carousel__button) {
  border-radius: 0.125rem;
  height: 0.125rem;
  width: 0.125rem;
  background-color: #409eff;
}
</style>
